<template>
  <view class="login-container">
    <!-- 登录图标 -->
    <view class="login-icon">
      <u-image 
        width="120rpx" 
        height="120rpx" 
        shape="circle" 
        :src="loginIcon"
        mode="widthFix"
      ></u-image>
    </view>

    <!-- 登录提示 -->
    <view class="login-desc">
      为提供更好的服务，请授权手机号登录
    </view>

    <!-- 一键登录按钮 -->
    <view class="button-group">
      <!-- 微信小程序端 -->
      <button 
        v-if="isWeixin"
        open-type="getPhoneNumber" 
        @getphonenumber="onGetPhoneNumber"
        class="login-button"
      >
        <u-icon name="phone" class="button-icon"></u-icon>
        微信一键登录
      </button>

      <!-- App端 -->
      <button 
        v-else
        @click="appLogin"
        class="login-button"
      >
        <u-icon name="phone" class="button-icon"></u-icon>
        本机号码一键登录
      </button>
    </view>

    <!-- 隐私协议 -->
    <view class="privacy-text">
      登录即同意
      <text class="protocol" @click="openProtocol">《用户服务协议》</text>
      和
      <text class="protocol" @click="openPrivacy">《隐私政策》</text>
    </view>
  </view>
</template>

<script>
import { mapState } from 'vuex'

export default {
  data() {
    return {
      loginIcon: '/static/login.png',
      isWeixin: true,
      loading: false
    }
  },
  onLoad() {
    // 判断当前环境
    // this.checkEnv()
  },
  computed: {
    ...mapState(['appProperties'])
  },
  mounted() {
    // console.log(this.$store.getters.token); // 在这里检查 token
  },
  methods: {
    // 检查运行环境
    checkEnv() {
      const platform = uni.getSystemInfoSync().platform
	  console.log(platform)
      // #ifdef MP-WEIXIN
        this.isWeixin = true
        // #endif
        
        // #ifdef APP-PLUS
        this.isWeixin = false
        // #endif
      
    },

    // 微信小程序获取手机号
     onGetPhoneNumber(e) {
		console.log("微信登录")
      // if (this.loading) return
      
      // 用户拒绝授权
      if (e.detail.errMsg === 'getPhoneNumber:fail user deny') {
        uni.showToast({
          title: '请授权手机号以完成登录',
          icon: 'none',
          duration: 2000
        })
        return
      }
	  // 用户点击了允许授权
	  const { code } = e.detail;
	  console.log('微信登录 获取到的code=', code);
      this.loading = true
	  
	  this.$request('api/v1/loginByWechat', 'post', {
	  	code: code,
	  	// wxAvatar: weixUserInfo.avatarUrl
	  }).then(result => {
	  	// result.data.wxAvatar = weixUserInfo.avatarUrl; // 同步微信头像
		console.log("微信登录返回结果",result)
	  	this.$store.commit('login', result.data);
	  	uni.reLaunch({
	  		url: '/pages/ucenter/ucenter'
	  	});
	  });
	  
	  this.logining = false;
	  // eg: {code: "073BdF1w3us1mV2SRk1w3MDxpH3BdF1z", errMsg: "login:ok"}
	  },

    // 获取微信登录code
    async getCode() {
      return new Promise((resolve, reject) => {
        uni.login({
          provider: 'weixin',
          success: res => {
            resolve(res.code)
          },
          fail: err => {
            reject(err)
          }
        })
      })
    },

    // 显示其他登录方式
    showAlternativeLogin() {
      uni.showModal({
        title: '提示',
        content: '当前设备不支持一键登录，请使用验证码登录',
        confirmText: '前往验证码登录',
        success: (res) => {
          if (res.confirm) {
            uni.navigateTo({ url: '/pages/login/codeLogin' })
          }
        }
      })
    },

    // 打开用户协议
    openProtocol() {
      uni.navigateTo({ url: '/pages/webview/index?url=/protocol/service.html' })
    },

    // 打开隐私政策
    openPrivacy() {
      uni.navigateTo({ url: '/pages/webview/index?url=/protocol/privacy.html' })
    }
  },
  }

</script>

<style lang="scss" scoped>
$primary-color: #307afe;
$text-color: #666;
$light-text: #999;
$spacing-lg: 60rpx;
$spacing-md: 40rpx;
$spacing-sm: 20rpx;

.login-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100vh;
  background-color: #f5f7f9;
  padding-top: 30%;

  .login-icon {
    margin-bottom: $spacing-lg;
  }

  .login-desc {
    font-size: 30rpx;
    color: $text-color;
    margin-bottom: $spacing-lg;
    text-align: center;
    width: 80%;
  }

  .button-group {
    width: 80%;
    margin-bottom: $spacing-lg;

    .login-button {
      width: 100%;
      height: 90rpx;
      line-height: 90rpx;
      background-color: $primary-color;
      color: #fff;
      font-size: 32rpx;
      border-radius: 45rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      border: none;

      .button-icon {
        margin-right: $spacing-sm;
        font-size: 36rpx;
      }

      &::after {
        border: none;
      }
    }
  }

  .privacy-text {
    position: fixed;
    bottom: 50rpx;
    font-size: 24rpx;
    color: $light-text;
    text-align: center;

    .protocol {
      color: $primary-color;
      margin: 0 8rpx;
    }
  }
}
</style>
    